<template>
	<view class="content">
		<MusicPlayer ref="player"></MusicPlayer>
		<!-- 搜索框 -->
		<Search class="top"></Search>
		<!-- 分类列表 -->
		<view class="music_type top">
			    <view class="scroll-view">
			      <view v-for="(category, index) in categories" :key="index" @tap="selectCategory(category, index)" :class="{ 'category-item': true, 'selected': selectedIndex === index }">
			        {{ category }}
			      </view>
			    </view>
		</view>
		<!-- 播放列表 -->
		<view class="index_music_list top">
			<MusicList :list="musicDataList" :showDelete="false"></MusicList>
		</view>
	</view>
</template>

<script>
	import Search from '../../../component/Search/Search.vue';
	import MusicList from '../../../component/MusicList/MusicList.vue';
	import music from '../../../common/api/music/music';
	import MusicPlayer from '../../../component/MusicPlayer/MusicPlayer'
	export default {
		components: {
			Search,
			MusicList,
			MusicPlayer
		},
		created() {
			this.init();
		},
		mounted() {
			this.$refs.player.getCurrentPalyer();
		},
		data() {
			return {
			  // 分类列表
			  categories: ['推荐', '流行', '电子', '华语'], 
			  // 当前选中的分类索引
			  selectedIndex: 0, 
			  // 音乐数据
			  musicDataList:[],
			  // 默认查十条数据
			  page:{
				  num:10,
				  size:1
			  }
			};
		},
		// 上拉加载更多
		onReachBottom() {
			this.page.size = this.page.size + 1;
			music.search({
					type: category,
					pageNum: this.page.num,
					pageSize: this.page.size, 
				}).then(res=>{
					this.musicDataList.push(res.data.musics);
				})
		},
		methods: {
			// 初始化
			init(){
				this.getTypeList();
			},
			// 获取分类列表
			getTypeList(){
				music.getMusicTypes().then(res=>{
					this.categories = res.data.types;
					// 选择第一个分类
					this.selectCategory(this.categories[0],0);
				})
			},
			// 选择分类
			selectCategory(category, index) {
			  // 分类切换重置页码
			  if (this.categories[this.selectedIndex] != category) {
				  this.page.num = 10;
				  this.page.size = 1;
			  }
			  // 查询分类对应音乐
			  this.selectedIndex = index;
			  music.home({
				  type: category,
				  num: this.page.num
			  }).then(res=>{
				  this.musicDataList = res.data.musics;
			  })
			}
		}
	};
</script>

<style>
.music_type{
	overflow: hidden;
	width: 80%;
	height: 40px;
}
.scroll-view {
	height: 40px;
    width: 100%;
    white-space: nowrap;
}

.category-item {
	text-align: center;
	width: 13%;
    display: inline-block;
    padding: 0 10px;
    line-height: 30px;
    font-size: 16px;
    color: #333;
    cursor: pointer;
}

.category-item.selected {
  border-bottom: 1px solid black; /* 选中时下划线样式 */
}
.index_music_list{
	width: 80%;
}
</style>